<template>
    <div style="padding:20px 20px 20px 20px;background:#fff;">
      <el-table :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%"
        row-key="id" border lazy :load="load" id="exportTable">
        <el-table-column prop="username" label="客户姓名" align="center"></el-table-column>
        <el-table-column prop="card_name" label="预约项目" align="center"></el-table-column>
        <el-table-column prop="date" label="预约时间" align="center"></el-table-column>
        <el-table-column prop="stime" label="开始时间" align="center"></el-table-column>
        <el-table-column prop="etime" label="结束时间" align="center"></el-table-column>
        <el-table-column prop="star" label="服务评价" align="center"></el-table-column>
        <el-table-column prop="realname" label="美容师" align="center"></el-table-column>
        <el-table-column label="完成状态" align="center">
          <template slot-scope="scope">
            {{scope.row.type == 1 ? '未完成' : scope.row.type == 2 ? '已完成' : '已取消'}}
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="140" align="center">
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.type == 1" class="item smallinit" effect="dark" content="完成" placement="top-start">
              <el-button size="small" type="success" icon="el-icon-check" 
              @click="clickOk(scope.row.id,2)"></el-button>
            </el-tooltip>
            <el-tooltip v-if="scope.row.type == 1" class="item smallinit" effect="dark" content="取消" placement="top-start">
              <el-button size="small" type="warning" icon="el-icon-close" 
              @click="cancel(scope.row.id,3)"></el-button>
            </el-tooltip>
            <el-tooltip class="item smallinit" effect="dark" content="删除" placement="top-start">
              <el-button size="small" type="danger" icon="el-icon-delete" 
              @click="del(scope.row.id,scope)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="fen"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesize"
        :page-sizes="[5, 10, 20, 50]"      
        layout="total, sizes, prev, pager, next, jumper"
        :total="list.length">
      </el-pagination>
</div>
</template>
<script>
export default {
  name: 'markTable',
  props:['list'],
  data(){
      return {
          currentPage:1, //初始页
          pagesize:10, //每页的数据
          show_page:true,
          nowpage:1,
          maxpage:10
      }
  },
  created: function() {
    
  },
  methods: {
    handleSizeChange: function (size) {
        this.pagesize = size;
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
    },
    changeLeft($event){
        $event.currentTarget.className="active";
    },
    removeLeft($event){
        $event.currentTarget.className ="tdclass";
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve()
      }, 1000)
    },
    dialog:function(key,item){
      this.$emit("func",{'key':key,'item':item})
    },
    clickOk:function(id,type){
      var that = this
      this.$confirm('是否已完成?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.save(id,type)
          return;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });          
        });
    },
    cancel:function(id,type){
      var that = this
      this.$confirm('是否确定取消?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.save(id,type)
          return;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });          
        });
    },
    del:function(id,scope){
      var that = this
      this.$confirm('此操作将永久删除条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.del(id,scope)
          return;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });          
        });
    },
    save:function(id,type){
      var data = {id:id,type:type}
      var that = this
      this.$post('pc/mark/save',data).then((res) => {
          if(res.code == 1){
              that.$message.success(res.msg);
              that.$emit("func",{type:1})
          }else{
              that.$message.error(res.msg);
          }
      })
    },
    del:function(id,scope){
      var index = scope.$index
      var that = this
      this.$del('pc/mark/del',{id:id}).then((res) => {
        if(res.code == 1){
            that.$message.success(res.msg);
            that.list.splice(index,1)
        }else{
            that.$message.error(res.msg);
        }
      })
    }
  }
};
</script>
<style>
.fen{text-align:center;}
.el-button+.el-button {
    margin-left: 3px !important;
}
.smallinit {
    padding: 2px 4px !important;
}
</style>